<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"">
<title>Update User Info</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/css/update.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/css/validform.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/plugin/datepicker/css/ui-lightness/jquery-ui-1.10.0.custom.min.css" />


<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery.form.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/plugin/artDialog/jquery.artDialog.js?skin=black"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/Validform_v5.3_min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/plugin/datepicker/js/jquery-ui-1.10.0.custom.min.js"></script>

	<script type="text/javascript">  
	$(function(){         
	    $('#kaptchaImage').click(function () {//generate kaptcha image
	     $(this).attr('src', 'kaptcha/getKaptcha.do?' + Math.floor(Math.random()*100) );  
	     event.cancelBubble=true;  
	    });  
	});
	  
	function changeCode() {  
	    $('#kaptchaImage').attr('src', 'kaptcha/getKaptcha.do?' + Math.floor(Math.random()*100) );  
	    event.cancelBubble=true;  
	}  
	</script>
</head>

<body>	
	<form:form action="." method="post"
		modelAttribute="userUpdateFormTransmitter">
		<table id="updateTable">
			<tr>
				<td width="200px">姓名:</td>
				<td width="200px"><form:input path="userInfoBasicModel.name" datatype="/^\S{2,18}$/" nullmsg="请输入用户名！" errormsg="昵称为2~18个字符！" /></td>
				<td width="200px"><div class="Validform_checktip">昵称为2~18个字符</div></td>
			</tr>
			<tr>
				<td>邮箱:</td>
				<td><form:input path="userInfoBasicModel.email" readonly="true" /></td>
				<td><div class="Validform_checktip">此项不能更改</div></td>
			</tr>
			<tr>
				<td><span id="updatePwdAction">收起更改密码</span></td>
			</tr>
			<tr id="updatePwd">
			<td colspan="3">
				<table style="border:1px solid #e8e8e8;">
					<tr>
						<td>旧密码:</td>
						<td><input type="password" name="old_password" datatype="/^\w{6,16}$/" nullmsg="请填入旧密码！" errormsg="密码为6~16个字符(字母、数字)！" /></td>
						<td><div class="Validform_checktip">密码为6~16个字符(字母、数字)</div></td>
					</tr>
					<tr>
						<td>新密码:</td>
						<td><input type="password" name="new_password" datatype="/^\w{6,16}$/" nullmsg="请填入新密码！" errormsg="密码为6~16个字符(字母、数字)！" /></td>
						<td><div class="Validform_checktip">密码为6~16个字符(字母、数字)</div></td>
					</tr>
					<tr>
						<td>重复新密码:</td>
						<td><input type="password" datatype="*" recheck="new_password" nullmsg="请再输入一次密码！" errormsg="两次输入密码需一致！" /></td>
						<td><div class="Validform_checktip">两次输入密码需一致</div></td>
					</tr>
				</table>
			</td>
			</tr>
			
			<tr>
				<td>昵称:</td>
				<td><form:input path="userInfoBasicModel.nickname" /></td>
				<td><div class="Validform_checktip">请输入您的昵称（可空）</div></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>Male: <form:radiobutton path="userInfoBasicModel.sex" value="1" /><br>
					Female: <form:radiobutton path="userInfoBasicModel.sex" value="0" /></td>
				<td><div class="Validform_checktip">请选择性别</div></td>
			</tr>
			<tr>
				<td>生日:</td>
				<td><form:input path="userInfoBasicModel.birthday" class="datePicker" readonly="true" /></td>
				<td><div class="Validform_checktip">请选择您的出生年月</div></td>
			</tr>
			<tr>
				<td>学校:</td>
				<td><form:input path="userInfoBasicModel.school" datatype="*" nullmsg="请填写您所在的学校！" /></td>
				<td><div class="Validform_checktip">请填写您所在的学校</div></td>
			</tr>
			<tr>
				<td>年级:</td>
				<td><form:input path="userInfoBasicModel.grade" /></td>
			</tr>
			<tr>
				<td>身高:</td>
				<td><form:input path="userInfoBasicModel.height" /></td>
			</tr>
			<tr>
				<td>体重:</td>
				<td><form:input path="userInfoBasicModel.weight" /></td>
			</tr>
			<tr>
				<td>民族:</td>
				<td><form:input path="userInfoBasicModel.nation" /></td>
			</tr>
			<tr>
				<td>手机电话:</td>
				<td><form:input path="userInfoBasicModel.mobile_phone" /></td>
			</tr>
			<tr>
				<td>固定电话:</td>
				<td><form:input path="userInfoBasicModel.home_phone" /></td>
			</tr>
			<tr>
				<td>身份证号:</td>
				<td><form:input path="userInfoBasicModel.id_no" /></td>
			</tr>
			<tr>
				<td>护照号:</td>
				<td><form:input path="userInfoBasicModel.passport_no" /></td>
			</tr>
			<tr>
				<td>护照签发日:</td>
				<td><form:input path="userInfoBasicModel.passport_date_issue" class="datePicker" readonly="true" /></td>
			</tr>
			<tr>
				<td>护照到期日:</td>
				<td><form:input path="userInfoBasicModel.passport_date_expire" class="datePicker" readonly="true" /></td>
			</tr>
			<tr>
				<td>家庭住址:</td>
				<td><form:input path="userInfoBasicModel.address" /></td>
			</tr>
			<tr>
				<td>监护人</td>
			</tr>
			<c:forEach varStatus="idx" items="${requestScope.userUpdateFormTransmitter.guardianModels}">
			<tr>
			<td colspan="3">
			<table style="border:1px solid #e8e8e8;">
				<tr>
					<td>监护人姓名:</td>
					<td><form:input path="guardianModels[${idx.index}].name" datatype="/^\S{2,18}$/" nullmsg="请填写监护人姓名！" errormsg="请填写监护人姓名！" /></td>
					<td><div class="Validform_checktip">请填写监护人姓名</div></td>
				</tr>
				<tr>
					<td>监护人关系:</td>
					<td><form:input path="guardianModels[${idx.index}].relationship" datatype="/^\S{2,18}$/" nullmsg="请填写监护人关系！" errormsg="请填写监护人关系！" /></td>
					<td><div class="Validform_checktip">请填写监护人关系</div></td>
				</tr>
				<tr>
					<td>监护人电话:</td>
					<td><form:input path="guardianModels[${idx.index}].phone_number" datatype="phone" errormsg="手机与固话至少填写一项！" nullmsg="手机与固话至少填写一项！" /></td>
                    <td><div class="Validform_checktip">手机与固话至少填写一项</div></td>
				</tr>
				<tr>
					<td>监护人工作单位:</td>
					<td><form:input path="guardianModels[${idx.index}].corporation" datatype="/^\S{2,18}$/" nullmsg="请填写监护人工作单位！" errormsg="请填写监护人工作单位！" /></td>
					<td><div class="Validform_checktip">请填写监护人工作单位</div></td>
				</tr>
				<tr>
					<td>监护人身份证号:</td>
					<td><form:input path="guardianModels[${idx.index}].id_no" datatype="idcard" nullmsg="请填写身份证号码！" errormsg="您填写的身份证号码不对！" /></td>
					<td><div class="Validform_checktip">请输入真实身份证号码</div></td>
				</tr>
				<tr>
					<td><a style="cursor:pointer; color:blue; font-size:14px;" onclick="javascript:delGuardian(this)">删除</a></td>
				</tr>
			</table>
			</td>
			</tr>
			</c:forEach>
			<tr id="addGuardian"><td><a href="javascript:addGuardian()">+添加监护人</a></a></td></tr>
			<tr>
				<td colspan="3" align="center"><input type="submit" value="更新用户信息"></td>
			</tr>
		</table>
	</form:form>
	<div id="addGuardianHtml" style="display:none;">
			<table style="border:1px solid #e8e8e8;">
				<tr>
					<td>监护人姓名:</td>
					<td><input type="text" name="guardianModels[]" datatype="/^\S{2,18}$/" nullmsg="请填写监护人姓名！" errormsg="请填写监护人姓名！" /></td>
					<td><div class="Validform_checktip">请填写监护人姓名</div></td>
				</tr>
				<tr>
					<td>监护人关系:</td>
					<td><input type="text" name="guardianModels[]" datatype="/^\S{2,18}$/" nullmsg="请填写监护人关系！" errormsg="请填写监护人关系！" /></td>
					<td><div class="Validform_checktip">请填写监护人关系</div></td>
				</tr>
				<tr>
					<td>监护人电话:</td>
					<td><input type="text" name="guardianModels[]" datatype="phone" errormsg="手机与固话至少填写一项！" nullmsg="手机与固话至少填写一项！" /></td>
                    <td><div class="Validform_checktip">手机与固话至少填写一项</div></td>
				</tr>
				<tr>
					<td>监护人工作单位:</td>
					<td><input type="text" name="guardianModels[]" datatype="/^\S{2,18}$/" nullmsg="请填写监护人工作单位！" errormsg="请填写监护人工作单位！" /></td>
					<td><div class="Validform_checktip">请填写监护人工作单位</div></td>
				</tr>
				<tr>
					<td>监护人身份证号:</td>
					<td><input type="text" name="guardianModels[]" datatype="idcard" nullmsg="请填写身份证号码！" errormsg="您填写的身份证号码不对！" /></td>
					<td><div class="Validform_checktip">请输入真实身份证号码</div></td>
				</tr>
				<tr>
					<td><a style="cursor:pointer; color:blue; font-size:14px;" onclick="javascript:delGuardian(this)">删除</a></td>
				</tr>
			</table>
	</div>
	<script type="text/javascript">
	function addGuardian()
	{
		$("#addGuardian").before("<tr><td colspan='3'>"+$("#addGuardianHtml").html()+"</td></tr>");
	}
	function delGuardian(obj)
	{
		$(obj).parents("table").parents("tr").remove();
	}
	$(function(){
		$("#updatePwdAction").click(function(){
			if($("#updatePwd:visible").size()>0)
			{
				$(this).text("修改密码");
				$("#updatePwd").hide();
				$("input[type=password]").val("").removeAttr("datatype");
				
			}
			else
			{
				$(this).text("收起修改密码");
				$("#updatePwd").show();
				$("input[type=password]").attr("datatype","/^\w{6,16}$/");
			}
		});
		
		$(".datePicker").datepicker({
			yearRange: "-25:+25",
			showOtherMonths: true,
		    selectOtherMonths: true,
			dateFormat: "yy-mm-dd",
			changeMonth:true,
			changeYear:true,
			monthNamesShort: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ],
			dayNamesMin: [ "日", "一", "二", "三", "四", "五", "六" ]
		});
		
		var success=0;
		$("#userUpdateFormTransmitter").Validform({
			tiptype:2,
			datatype:{//传入自定义datatype类型【方式二】;
				"phone":function(gets,obj,curform,regxp){

					/*参数gets是获取到的表单元素值，

					  obj为当前表单元素，

					  curform为当前验证的表单，

					  regxp为内置的一些正则表达式的引用。*/



					var reg1=regxp["m"],

						reg2=/[\d]{7}/,

						mobile=curform.find(".mobile");

					

					if(reg1.test(mobile.val())){return true;}

					if(reg2.test(gets)){return true;}

					

					return false;

				},
				"idcard":function(gets,obj,curform,datatype){

					//该方法由佚名网友提供;

				

					var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ];// 加权因子;

					var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ];// 身份证验证位值，10代表X;

				

					if (gets.length == 15) {   

						return isValidityBrithBy15IdCard(gets);   

					}else if (gets.length == 18){   

						var a_idCard = gets.split("");// 得到身份证数组   

						if (isValidityBrithBy18IdCard(gets)&&isTrueValidateCodeBy18IdCard(a_idCard)) {   

							return true;   

						}   

						return false;

					}

					return false;

					

					function isTrueValidateCodeBy18IdCard(a_idCard) {   

						var sum = 0; // 声明加权求和变量   

						if (a_idCard[17].toLowerCase() == 'x') {   

							a_idCard[17] = 10;// 将最后位为x的验证码替换为10方便后续操作   

						}   

						for ( var i = 0; i < 17; i++) {   

							sum += Wi[i] * a_idCard[i];// 加权求和   

						}   

						valCodePosition = sum % 11;// 得到验证码所位置   

						if (a_idCard[17] == ValideCode[valCodePosition]) {   

							return true;   

						}

						return false;   

					}

					

					function isValidityBrithBy18IdCard(idCard18){   

						var year = idCard18.substring(6,10);   

						var month = idCard18.substring(10,12);   

						var day = idCard18.substring(12,14);   

						var temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));   

						// 这里用getFullYear()获取年份，避免千年虫问题   

						if(temp_date.getFullYear()!=parseFloat(year) || temp_date.getMonth()!=parseFloat(month)-1 || temp_date.getDate()!=parseFloat(day)){   

							return false;   

						}

						return true;   

					}

					

					function isValidityBrithBy15IdCard(idCard15){   

						var year =  idCard15.substring(6,8);   

						var month = idCard15.substring(8,10);   

						var day = idCard15.substring(10,12);

						var temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));   

						// 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法   

						if(temp_date.getYear()!=parseFloat(year) || temp_date.getMonth()!=parseFloat(month)-1 || temp_date.getDate()!=parseFloat(day)){   

							return false;   
						}
						return true;
					}
				}
			},
			showAllError:true,
			callback:function(form){
				var stateDialog=art.dialog({
					content:"请稍等一会！",
					lock:true,
					ok:function(){
						if(success==1)
						{
							window.location.reload();
						}
					},
					close:function(){
						if(success==1)
						{
							window.location.reload();
						}
					}
				});
				
				$('#userUpdateFormTransmitter').ajaxSubmit(function(data){
					var content;
					switch(data)
					{
					case "SUCCESS":
						content="成功";
						success=1;
						break;
					case "FORM_FIELD_FORMAT_INCORRECT":
						content="表单数据格式不正确";
						break;
					case "FORM_KAPTCHA_INCORRECT":
						content="表单验证码不正确";
						break;
					case "REGISTER_EMAIL_REPEAT":
						content="email已被注册";
						break;
					default:
						content="未知错误";
						break;
					}
					stateDialog.content(content);
				});
				return false;
			}
		});
	});
	</script>
</body>
</html>